<template>
	<view class="index-top">
		<!-- <uni-search-bar @confirm="confirmSearch" @input="" /> -->
		<view class="input-wrap">
			<view class="input-prefix">
				梦见
			</view>
			<input v-model="inputVal" @confirm="confirmSearch" type="text" placeholder="结婚、手机爆炸"
				:placeholder-style="placeholderStyle" />
			<view class="search-btn" @click="confirmSearch">
				<view class="search-inner">
					解梦
				</view>
			</view>
		</view>
	</view>

</template>

<script lang="ts">
	import { defineComponent, ref } from "vue"
	export default defineComponent({
		setup() {
			const inputVal = ref<string>('')
			const routerPush = (text : string) => {
				uni.navigateTo({
					url: "/pages/detail/index" + `?keyword=${text}`
				})
			}
			const placeholderStyle = 'color: #999; font-size: 12px;'
			const confirmSearch = () => {
				if (!inputVal.value.trim()) {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none',
						duration: 1000
					})
					return
				}
				routerPush(inputVal.value)
			}
			return {
				confirmSearch,
				placeholderStyle,
				inputVal
			}
		}
	})
</script>

<style lang="scss" scoped>
	input::placeholder {
		/* placeholder颜色 */
		color: #FFFFFF;
		/* placeholder字体大小 */
		font-size: 25px
	}

	.index-top {
			background-image: url('');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 200px;
		overflow: hidden;
		display: flex;
		justify-content: center;
		font-size: 13px;

		.input-wrap {
			display: flex;
			height: 35px;
			width: 80%;
			line-height: 35px;
			margin-top: 120px;

			.input-prefix {
				width: 40px;
				font-weight: bold;
				border-bottom-left-radius: 15px;
				border-top-left-radius: 15px;
				background-color: #F4EFE9;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.search-btn {
				cursor: pointer;
				background-color: #fff;
				width: 45px;
				border-bottom-right-radius: 15px;
				border-top-right-radius: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-right: 5px;
			}

			.search-inner {
				background-color: #ed6660;
				font-weight: bold;
				height: 80%;
				border-radius: 15px;
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			input {
				flex: 1;
				height: 100%;
				padding-left: 10px;
				font-size: 13px;
				background-color: #fff;
			}
		}
	}
</style>